<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <!-- 基本选择器 -->
    <style>
        * {
            margin: 10px;
            padding: 0;
        }

        h1 {
            color: aquamarine;
        }

        .s {
            font-weight: 800;
        }

        .s1 {
            color: bisque;
        }

        .s2 {
            color: brown;
        }

        #d1 {
            width: 200px;
            height: 200px;
            border-radius: 20%;
            background-color: orchid;
        }

        #d2 {
            width: 200px;
            height: 300px;
            /* 圆角 */
            border-radius: 10%;
            /* 边框：宽度  样式  颜色 */
            border: 3px solid rgb(255, 182, 182);
        }

        span[class="s s2"] {
            color: paleturquoise;
        }

        /* 后代选择器 */
        /* .u1 ul {
            color: olive;
        } */

        /* 子选择器（>） */
        .u1>li {
            color: blueviolet;
        }


        /* 相邻兄弟选择器 (+) */
        /* .u1+li {
            color: tomato;
        } */

        /* 通用兄弟选择器 (~) */
        .u1~li {
            color: teal;
        }
    </style>
</head>

<body>
    <h1>基本选择器</h1>
    <span class="s s1">用户名已存在</span><br>
    <span class="s s2">当前手机号被占用</span><br>
    <div id="d1"></div>
    <div id="d2"></div>

    <ul class="u1">
        <li><a>水果</a>
            <ul class="u2">
                <li><a>苹果</a></li>
                <li><a>香蕉</a></li>
                <li><a>葡萄</a></li>
            </ul>
        </li>
        <li>蔬菜</li>
        <li>肉类</li>
    </ul>
    <li>11111111111</li>
    <li>22222222222</li>
    <li>33333333333</li>
</body>

</html>